{include file="index/header"}
<div class="layui-fluid">
    <div class="layui-container">
        <div class="row">
            <div class="col-sm-12">
                <div class="layui-card">
                    <div class="layui-card-header">

                    </div>
                    <div class="layui-card-body">
                        <div class="row">
                            <form class="layui-form" action="{:url('develop/validator/run')}" onsubmit="return false"
                                  method="post">
                                <div class="layui-form-item">
                                    <label class="layui-form-label" for="link_name">数据表：</label>
                                    <div class="layui-input-inline">
                                        <select class="select db-table" lay-search lay-verify="required" name="table">
                                            <option value="">不从数据表生成</option>
                                            {foreach name='tables' item='table'}
                                            <option value="{$table.Name}" {$Request.param.table== $table.Name ? 'selected' : ''}>{$table.Name}</option>
                                            {/foreach}
                                        </select>
                                    </div>

                                    <button type="button" class="layui-btn  db-jump" title="点击此项选择从数据库生成字段">
                                        确认选择
                                    </button>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">模块：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" placeholder="模块" name="module" lay-verify="required" value="common">
                                    </div>

                                </div>

                                <input type="hidden" placeholder="字段" name="file" value="validator">

                                <h2 style="font-size: 16px">表单信息 ：</h2>
                                <hr>

                                <table class="layui-table">
                                    <thead>
                                    <tr class="text-c">
                                        <th width="110" rowspan="2" title="删除后不可恢复，谨慎操作" style="text-align: center;">
                                            操作<br>
                                            <a href="javascript:;" class="layui-btn layui-btn-xs op-add"
                                               data-type="form" data-header="1" style="margin-top: 5px"> <span
                                                    class="fa fa-plus"></span> 增加一栏</a>
                                        </th>
                                        <th width="200"><span class="c-red">*</span> 字段</th>
                                        <th width="200"><span class="c-red">*</span> 规则</th>
                                        <th width="200"><span class="c-red">*</span> 长度</th>
                                        <th width="200"><span class="c-red">*</span> 备注</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody-form">
                                    <tr>
                                        <td title="删除后不可恢复，谨慎操作">
                                            <a href="javascript:;" class="layui-btn  layui-btn-danger layui-btn-xs radius op-delete">删除</a>
                                        </td>

                                        <td title="一般为对应数据库字段的名称">
                                            <input type="text" class="layui-input form-field" placeholder="字段" name="form[0][field]">
                                        </td>

                                        <td title="自动生成编辑页相应的表单控件">
                                            <div class="select-box" id="form_0_rule">
                                            </div>
                                        </td>

                                        <td title="一般为对应数据库字段的名称">
                                            <input type="text" class="layui-input form-rule2" placeholder="长度"
                                                   name="form[0][rule2]">
                                        </td>

                                        <td title="备注">
                                            <input type="text" class="layui-input form-comment" placeholder="备注"
                                                   name="form[0][comment]">
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script>

    layui.extend({
        xmSelect: 'xm-select'
    }).use(['index', 'form', 'xmSelect'], function () {
        var $ = layui.$
            , form = layui.form;

        // 渲染表单样式
        form.render();
        // 获取模板
        var template = {}, index = {};
        template['form'] = $("#tbody-form").html();
        template['field'] = $("#tbody-field").html();
        index['form'] = 0;
        index['field'] = 0;

        var rule_option = [
            {"value": "require", "name": "验证字段必须"},
            {"value": "number", "name": "纯数字"},
            {"value": "integer", "name": "整数"},
            {"value": "float", "name": "浮点数字"},
            {"value": "boolean", "name": "布尔值"},
            {"value": "email", "name": "邮箱"},
            {"value": "array", "name": "数组"},
            {"value": "accepted", "name": "是否为为"},
            {"value": "date", "name": "日期"},
            {"value": "alpha", "name": "纯字母"},
            {"value": "alphaNum", "name": "字母和数字"},
            {"value": "alphaDash", "name": "字母和数字下划线及破折号"},
            {"value": "chs", "name": "汉字"},
            {"value": "chsAlpha", "name": "汉字、字母"},
            {"value": "chsAlphaNum", "name": "汉字、字母和数字"},
            {"value": "chsDash", "name": "汉字、字母、数字和下划线_及破折号-"},
            {"value": "cntrl", "name": "控制字符（换行、缩进、空格）"},
            {"value": "graph", "name": "可打印字符（空格除外）"},
            {"value": "print", "name": "可打印字符（包括空格）"},
            {"value": "lower", "name": "小写字符"},
            {"value": "upper", "name": "大写字符"},
            {"value": "space", "name": "空白字符"},
            {"value": "xdigit", "name": "十六进制字符串"},
            {"value": "activeUrl", "name": "有效的域名或者IP"},
            {"value": "url", "name": "有效的URL地址"},
            {"value": "ip", "name": "有效的IP地址"},
            {"value": "mobile", "name": "电话"},
            {"value": "idCard", "name": "身份证"},
            {"value": "macAddr", "name": "MAC地址"},
            {"value": "zip", "name": "邮政编码"},
            {"value": "url", "name": "有效的URL地址"},
            {"value": "checkMobileCode", "name": "校验手机验证码"},
        ]


        $(document).on("click", ".db-jump", function () {
            location.href = "?table=" + $('.db-table').val();
        }).on("click", ".op-add", function () {
            var type = $(this).attr("data-type");
            var html = template[type].replace(/(\[\d+\])/g, '[' + (++index[type]) + ']');
            html = html.replace(/(\_\d+\_)/g, '_' + index[type] + '_')
            // 表头菜单，追加到第一个
            if ($(this)[0].hasAttribute('data-header')) {
                $("#tbody-" + type).prepend(html);
            } else {
                $(this).closest('tr').after(html);
            }
            xmSelect.render({
                el: '#form_' + index[type] + '_rule',
                filterable: true,
                name: 'form[' + index[type] + '][rule]',
                data: rule_option,
                initValue: []
            });

            form.render();
        }).on("click", ".op-sync", function () {

            var objField = $("#tbody-field");
            objField.find('tr').remove();
            $("#tbody-form").find('tr').each(function () {
                objField.append(template['field'].replace(/(\[\d+\])/g, '[' + (++index['field']) + ']'));
                var objCurrent = objField.find('tr:last');
                objCurrent.find('.field-comment').val($(this).find('.form-title').val());
                objCurrent.find('.field-name').val($(this).find('.form-name').val());
            });
            form.render();
            return false;
        }).on("click", ".op-delete", function () {
            // 删除一栏
            $(this).closest("tr").fadeOut(undefined, undefined, function () {
                // 使用回调函数，强行移除该DOM
                $(this).remove();
            });
            form.render();
        })

        var tableInfo = {$table_info | raw
    }
        ;
        var objForm = $("#tbody-form");

        objForm.find('tr').remove();
        for (var i = 0; i < tableInfo.length; i++) {
            var html = template['form'].replace(/(\[\d+\])/g, '[' + (++index['form']) + ']');
            html = html.replace(/(\_\d+\_)/g, '_' + (i + 1) + '_')
            objForm.append(html);
            xmSelect.render({
                el: '#form_' + (i + 1) + '_rule',
                filterable: true,
                name: 'form[' + (i + 1) + '][rule]',
                data: rule_option,
                initValue: tableInfo[i].rule
            });
            var objCurrent = objForm.find('tr:last');
            objCurrent.find('.form-comment').val(tableInfo[i].comment);
            objCurrent.find('.form-field').val(tableInfo[i].field);
            objCurrent.find('.form-rule2').val(tableInfo[i].rule2);
        }
        form.render();


        // 监听提交
        form.on('submit(formDemo)', function (data) {
            Post(data.form.action, data.field, function (res) {
                if (res.code == 1) {
                    alert_success(res.msg, function () {

                    });
                } else {
                    alert_error(res.msg);
                }
            });
            return false;
        });
    });
</script>
